
import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlMeteor extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

        let meteor=this.$.meteor;

        for(let i=0;i<30;i++){

            let newMeteor=document.createElement("div");
            newMeteor.className="star";
            newMeteor.style.top=this.randDistance(30,-30)+"px";
            newMeteor.style.left=this.randDistance(150,20)+"px";
            meteor.appendChild(newMeteor);
        }

        let meteorItem=this.$.meteor.children;
        for(let j=0,len=meteorItem.length;i<len;j++){

            if(j%6==0){

                meteorItem[j].style.animationDelay='0s';
            }else{

                meteorItem[j].style.animationDelay=i*0.8+'s';
            }
        }

    }


    randDistance(max,min){



        let distance=Math.floor(Math.random()*(max-min-1)*10+min);
        return distance;

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
                .owl-meteor{
                
                   /*width: 600px;*/
                   /*height: 300px;*/
                   background-color: black;
                   
                }
        .star {
            display: block;
            width: 1px;
            background: transparent;
            position: relative;
            opacity: 0;
            /*过渡动画*/
            
            animation: star-fall 3s linear infinite;
            -webkit-animation: star-fall 3s linear infinite;
            -moz-animation: star-fall 3s linear infinite;
        }
        .star:after {
            content: '';
            display: block;
            border: 0px solid #fff;
            border-width: 0px 90px 2px 90px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .5);
            box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
            /*变形*/
            
            transform: rotate(-45deg) translate3d(1px, 3px, 0);
            -webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
            -moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
            transform-origin: 0% 100%;
            -webkit-transform-origin: 0% 100%;
            -moz-transform-origin: 0% 100%;
        }
        @keyframes star-fall {
            0% {
                opacity: 0;
                transform: scale(0.5) translate3d(0, 0, 0);
                -webkit-transform: scale(0.5) translate3d(0, 0, 0);
                -moz-transform: scale(0.5) translate3d(0, 0, 0);
            }
            50% {
                opacity: 1;
                transform: translate3d(-200px, 200px, 0);
                -webkit-transform: translate3d(-200px, 200px, 0);
                -moz-transform: translate3d(-200px, 200px, 0);
            }
            100% {
                opacity: 0;
                transform: scale(1.2) translate3d(-300px, 300px, 0);
                -webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);
                -moz-transform: scale(1.2) translate3d(-300px, 300px, 0);
            }
        }
         
                     
            </style>
        
          <div class="owl-meteor" id="meteor">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-meteor",OwlMeteor);
